<mat-card class="margin-bottom-m dashboard-card">
  <mat-card-title class="d-flex align-items-center justify-content-between">
    <div class="d-flex align-items-center justify-content-start">
      {{ 'dashboard.body.panel_title.PROTOCOL_APPS_IN_POLICY' | translate }}
    </div>
    <app-panel-instruction-curtain
      class="d-flex align-items-center justify-content-end"
      [instructions]="instructions"
    >
    </app-panel-instruction-curtain>
  </mat-card-title>
  <mat-card-content
    class="row margin-horizon-0"
    *ngIf="dashboardDetailsService.applications"
  >
    <mat-tab-group>
      <mat-tab label="{{'dashboard.body.panel_title.POLICY_COUNT' | translate}}">
        <app-application-conversation-chart
          [applications]="dashboardDetailsService.applications"
        >
        </app-application-conversation-chart>
      </mat-tab>
      <mat-tab label="{{'dashboard.body.panel_title.BYTES' | translate}}">
        <app-application-volume-chart
          [applications]="dashboardDetailsService.applications"
        >
        </app-application-volume-chart>
      </mat-tab>
    </mat-tab-group>
  </mat-card-content>
</mat-card>
